﻿<AntContainer />


<Layout Style="height: 100%;">
    @*左边区域*@
    <Sider Style="overflow: auto;height: 100vh;position: fixed;left: 0;">
        @*笔记本头部*@
        <div class="notebook-head">
            <span class="notebook-head-txt">笔记本</span>
            <div class="notebook-head-operate">
                <Icon Class="notebook-plus" Type="plus" Theme="outline" OnClick="ShowAddNotebookModal" />
                <Icon Class="notebook-minus" Type="minus" Theme="outline" OnClick="ShowRemoveNotebookModal" />
            </div>
        </div>
        @*笔记本列表*@
        @*<Menu Class="notebook-list" Mode=MenuMode.Inline Theme=MenuTheme.Dark OnMenuItemClicked="OnNotebookClick"
            Style="height: calc(100% - 180px);overflow-y: auto;">*@
        <Menu Class="notebook-list" Mode=MenuMode.Inline Theme=MenuTheme.Dark OnMenuItemClicked="OnNotebookClick"
            Style="max-height: calc(100% - 40px);overflow-y: auto;">
            @foreach (var n in notebookList)
            {
                <MenuItem Key="@n.Id.ToString()" Icon="folder">
                    @n.Name
                </MenuItem>
            }
        </Menu>

        @*操作按钮组*@
        @*<div class="operate-btn-box">
            <Button Type="@ButtonType.Primary" Style="margin-bottom: 8px;">设置</Button>
            <Button Type="@ButtonType.Primary" Style="margin-bottom: 8px;">同步到云端</Button>
            <Button Type="@ButtonType.Primary">同步到本地</Button>
            </div>*@
    </Sider>
    @*右边区域*@
    <Layout Class="site-layout" Style="margin-left: 200px">
        <Content Style="margin: 0; overflow: initial; ">
            <GridRow Style="height: 100vh;">
                @*笔记栏*@
                <GridCol Style="height: 100vh;background-color:#e7e7e7;">
                    @*笔记栏头部*@
                    <div class="note-head">
                        <span class="note-head-txt">笔记</span>
                        <div class="note-head-operate">
                            <Icon Class="note-plus" Type="plus" Theme="outline" OnClick="AddNote" />
                            <Icon Class="note-minus" Type="minus" Theme="outline" OnClick="RemoveNote" />
                        </div>
                    </div>
                    @*笔记列表*@
                    <Menu Class="note-list" Theme=MenuTheme.Light Mode=MenuMode.Inline OnMenuItemClicked="OnNoteClick"
                          SelectedKeys="selectedNoteKeys"
                          Style="width: 288px;">
                        @foreach (var n in noteList)
                        {
                            <MenuItem Key="@n.Id.ToString()">
                                @n.Title
                            </MenuItem>
                        }
                    </Menu>
                </GridCol>

                @*编辑栏*@
                <GridCol Flex=@("auto;") Style="height: 100vh;">
                    @if (editorIsShow)
                    {
                        @*文章标题输入框*@
                        <Input AllowClear="true" MaxLength="255" Placeholder="输入文章标题..." @bind-Value="@artTitle"
                        OnBlur="ArtTitleOnBlur" Style="width: 100%;" />
                        @*编辑器*@
                        <Vditor.Editor @ref="editor" @bind-Value="artMdContent" @bind-Html="artHtmlContent" Mode="ir"
                        MinHeight="680" Toolbar="editorToolbar" OnToolbarButtonClick="OnToolbarButtonClick" />

                    }
                </GridCol>
            </GridRow>

        </Content>
    </Layout>
</Layout>

@*添加笔记本弹窗*@
<Modal Title="添加笔记本" MaskClosable=false Visible="@addNotebookIsShow" OnOk="@HandleAddNotebookOk"
    OnCancel="@HandleAddNotebookCancel">
    <Form Loading="addNotebookloading" Model="@addNotebookModel" LabelColSpan="6" WrapperColSpan="16"
        OnFinish="HandAddNotebookOnFinish" OnFinishFailed="HandAddNotebookOnFinishFailed" @ref="@_addNotebookForm">
        <FormItem Label="笔记本名称">
            <Input @bind-Value="@context.Name" />
        </FormItem>
    </Form>
</Modal>

@code {
    RenderFragment deleteConfirmIcon = @<Icon Type="exclamation-circle" Theme="outline"></Icon>;

}


<style type="text/css">
    .notebook-head {
        height: 36px;
        background: #001529;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        text-align: center;
        padding: 5px 15px;
        align-items: center;
    }

    .notebook-head-txt {
        color: #1890ff;
        font-size: 20px;
        font-weight: 600;
    }

    .notebook-head-operate {
        display: flex;
        justify-content: space-between;
        justify-items: center;
        align-items: center;
    }

    .notebook-plus {
        color: #ffe500;
        font-size: 18px;
        margin-right: 20px;
    }

    .notebook-plus:hover {
        cursor: pointer;
    }

    .notebook-minus {
        color: red;
        font-size: 18px;
    }

    .notebook-minus:hover {
        cursor: pointer;
    }

    .operate-btn-box {
        padding: 15px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .note-head {
        height: 36px;
        /*background-color: #f0f2f5;*/
        background-color: #d9e0eb;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        text-align: center;
        padding: 5px 15px;
        align-items: center;
    }

    .note-head-txt {
        color: #1890ff;
        font-size: 20px;
        font-weight: 600;
    }

    .note-head-operate {
        display: flex;
        justify-content: space-between;
        justify-items: center;
        align-items: center;
    }

    .note-plus {
        color: #128f17;
        font-size: 18px;
        margin-right: 20px;
    }

    .note-plus:hover {
        cursor: pointer;
    }

    .note-minus {
        color: red;
        font-size: 18px;
    }

    .note-minus:hover {
        cursor: pointer;
    }

    .note-list .ant-menu-item {
        padding: 0 5px !important;
        height: auto;
        min-height: 40px;
    }

    .note-list .ant-menu-title-content {
        line-height: 16px;
    }


    .note-list .ant-menu-title-content {
        white-space: normal;
    }

    .note-list .ant-menu-item::after {
        border-right: none !important;
    }

    .vditor {
        height: 100% !important;
    }

    .vditor-toolbar {
        padding-left: 0 !important;
    }

    .vditor-reset {
        padding: 0 10px !important;
    }
</style>